<!-- 求职用户统计分析 -->
<template>
  <div class='behaviorStatisticsUsers statisticsUserAnalysis'>
    <!-- 头部 -->
    <echartsHeader title="求职用户统计分析" />
    <br />
    <div class="contents">
      <br />
      <!-- 图表1 -->
      <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="求职人员库中已在企业就业人员按居住地分布情况" contentHeight="500">
              <!-- id不要重复 -->
              <div id="ec_1"></div>
            </blockContent>
          </div>
          <br />
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="求职人员库中已在企业就业人员按年龄段分布情况">
              <!-- id不要重复 -->
              <div id="ec_2"></div>
            </blockContent>
          </div>
          <br>
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="高校和下岗职工人员占比" :showTitle="false" contentHeight="500">
              <!-- id不要重复 -->
              <div id="ec_3"></div>
            </blockContent>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="求职人员库中已在企业就业人员按就业行业分布情况" contentHeight="1365">
              <!-- id不要重复 -->
              <div id="ec_4"></div>
            </blockContent>

          </div>
        </el-col>
      </el-row>
      <br />
      <br />
      <!-- 图表1 -->
      <!-- <el-row :gutter="20" type="flex" class="row-bg" justify="left">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <blockContent title="求职人员库中已在企业就业人员按年龄段分布情况">
              <div id="ec_2"></div>
            </blockContent>
          </div>
        </el-col>
      </el-row> -->
      <br />
    </div>
  </div>
</template>

<script>
// 引入封装插件，需求不够跟我说
import { MyEcharts } from '@/components/page/DataCenter/utils/echart-utils'
console.log(MyEcharts, 'MyEcharts')
export default {
  components: {},
  data () {
    return {
      // 传递表格的数据
      // 折现
      Line: {
        legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 1001, 134, 90, 230, 210, 1020, 132, 1001, 1304, 90, 230, 210, 120, 132, 1001, 134, 90, 2300, 210, 120, 1302, 1010, 134, 900, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 1232, 101, 1344, 90, 2530, 210, 1620, 132, 1071, 1342, 930, 230, 210]
          }
        ]
      },
      // 环状饼图
      pie: {
        legend: ['35岁以下', '35-45岁', '45岁以上'],
        xAxis: ['35岁以下', '35-45岁', '45岁以上'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              position: 'inner'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '直达', selected: true },
              { value: 679, name: '营销广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#eee',
              borderColor: '#aaa',
              borderWidth: 1,
              borderRadius: 4,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 22,
                  align: 'center'
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 0.5,
                  height: 0
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            },
            data: [
              { value: 335, name: '直达' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1048, name: '百度' },
              { value: 251, name: '谷歌' },
              { value: 147, name: '必应' },
              { value: 102, name: '其他' }
            ]
          }
        ]
      },
      // 柱状图
      bar: {
        dataZoom: false, // 是否展示放大缩小
        tooltip: true,
        legend: ["炎陵县", "茶陵县", "攸县", "醴陵市", "渌口区", "芦淞区", "荷塘区", "石峰区", "天元区", "云龙示范区"],
        xAxis: ["炎陵县", "茶陵县", "攸县", "醴陵市", "渌口区", "芦淞区", "荷塘区", "石峰区", "天元区", "云龙示范区"],
        // legend: ["天元区", "荷塘区", "芦淞区", "石峰区", "渌口区", "云龙示范区", "醴陵市", "攸县", "茶陵县", "炎陵县"],
        // xAxis: ["天元区", "荷塘区", "芦淞区", "石峰区", "渌口区", "云龙示范区", "醴陵市", "攸县", "茶陵县", "炎陵县"],
        series: [
          {
            name: '区域',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                color: '#4ad2ff',
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{c}'　　　　//这是关键，在需要的地方加上就行了
                }
              }
            },
            // data: [3647, 3556, 4014, 4132, 1171, 203, 2880, 3231, 1292, 178]
            data: [178, 1292, 2880, 3231, 1171, 3647, 4014, 2556, 5132, 203]
          }
        ]
      },
      // 柱状图2
      bar1: {
        dataZoom: false, // 是否展示放大缩小
        tooltip: true,
        // rotate: 45,
        xAxisType: 'value',
        yAxisType: 'category',
        legend: ['交通运输/仓储/物流', '批发/零售/贸易', '金融业', '房地产业',
          '建筑业', '制造业', '专业服务', '农林牧渔', '能源/环保/矿产', '教育培训/科研',
          '卫生及社会工作', '公共管理/社会保障', '生活服务',
          '互联网/IT/电子/通信', '文化/体育/娱乐'],

        xAxis: ['交通运输/仓储/物流', '批发/零售/贸易', '金融业', '房地产业',
          '建筑业', '制造业', '专业服务', '农林牧渔', '能源/环保/矿产', '教育培训/科研',
          '卫生及社会工作', '公共管理/社会保障', '生活服务',
          '互联网/IT/电子/通信', '文化/体育/娱乐'],
        series: [
          {
            name: '行业',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                color: '#5789f1',
                label: {
                  show: true,
                  position: 'right',
                  formatter: '{c}'　　　　//这是关键，在需要的地方加上就行了
                }
              }
            },
            data: [383, 1083, 183, 1258, 808, 8869, 6056, 192, 308, 275, 283, 2375, 2992, 550, 116]
            //.sort(function (a, b) { return a.value - b.value; })
          }
          // {
          //   name: '交通运输',
          //   type: 'bar',
          //   stack: '总量',
          //   data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310]
          // },
          // {
          //   name: '仓储和邮政业',
          //   type: 'bar',
          //   stack: '总量',
          //   data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410]
          // },
          // {
          //   name: '批发和零售业',
          //   type: 'bar',
          //   stack: '总量',
          //   data: [320, 332, 301, 334, 390, 330, 320, 1503, 2432, 2051, 1654, 1790, 3380, 4910]
          // },
          // {
          //   name: '住宿和餐饮业',
          //   type: 'bar',
          //   stack: '总量',
          //   data: [820, 932, 901, 934, 1290, 1330, 1320, 1820, 322, 51, 934, 1250, 1360, 1320]
          // }, {
          //   name: '金融业',
          //   type: 'bar',
          //   stack: '总量',
          //   data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410]
          // },
          // {
          //   name: '房地产业',
          //   type: 'bar',
          //   stack: '总量',
          //   data: [320, 332, 301, 334, 390, 330, 320, 1503, 2432, 2051, 1654, 1790, 3380, 4910]
          // },
          // {
          //   name: '营利性服务业',
          //   type: 'bar',
          //   stack: '总量',
          //   data: [820, 932, 901, 934, 1290, 1330, 1320, 1820, 322, 51, 934, 1250, 1360, 1320]
          // },
          // {
          //   name: '非营利性服务业',
          //   type: 'bar',
          //   stack: '总量',
          //   data: [820, 932, 901, 934, 1290, 1330, 1320, 1820, 322, 51, 934, 1250, 1360, 1320]
          // },
        ]
      },
      // 普通饼图
      pieImg: {
        legend: ['35岁以下', '35-45岁', '45岁以上'],
        xAxis: ['35岁以下', '35-45岁', '45岁以上'],
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          color: ['#20a0ff ', '#5dd5a4', '#ffb460'],
          data: [
            { value: 4047, name: '35岁以下' },
            { value: 7076, name: '35-45岁' },
            { value: 13075, name: '45岁以上' }
            // 20 - 1090
            // 30 - 3409
            // 40 - 7338
            // 50 - 5303
            // 60 - 76
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      },
      // 柱状图
      bar3: {
        dataZoom: false, // 是否展示放大缩小
        tooltip: false,
        xAxis: ["高校毕业生", "下岗失业人员"],
        series: [
          {
            name: '24-32岁',
            type: 'bar',
            barWidth: 50,
            itemStyle: {
              normal: {
                color: '#4ad2ff',
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{c}'　　　　//这是关键，在需要的地方加上就行了
                }
              }
            },
            data: [3631, 1729]
          },
          // {
          //   name: '50岁以上',
          //   type: 'bar',
          //   barWidth: 30,
          //   itemStyle: {
          //     normal: {
          //       color: '#4ad2ff',
          //       label: {
          //         show: true,
          //         position: 'top',
          //         formatter: '{c}%'　　　　//这是关键，在需要的地方加上就行了
          //       }
          //     }
          //   },
          //   data: [0.04, 0.02]
          // }
        ]
      },
      arrNum: [
        { title: '累计注册量', number: '142' },
        { title: '累计登录量', number: 4553 },
        { title: '累计简历量', number: '645' },
        { title: '累计投递量', number: 7634 },
        { title: '累计面试邀请量', number: 84453 },
        { title: '累计聊天量', number: 1024 }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    optionChart () {
      let option_pie = MyEcharts.EchartsOption.bar('', '', this.bar)
      MyEcharts.initChart(option_pie, 'ec_1')

      let option_pie2 = MyEcharts.EchartsOption.pie('', '', this.pieImg)
      MyEcharts.initChart(option_pie2, 'ec_2')

      let option_pie3 = MyEcharts.EchartsOption.bar('', '', this.bar3)
      MyEcharts.initChart(option_pie3, 'ec_3')

      let option_pie4 = MyEcharts.EchartsOption.bar('', '', this.bar1)
      MyEcharts.initChart(option_pie4, 'ec_4')
    }
  },
  created () {
  },
  mounted () {
    // 为了模拟数据返回等待的时间，同时也是为了更好的初始化实例
    setTimeout(() => {
      this.optionChart()
    }, 500);
  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.behaviorStatisticsUsers {
    background: #080850;
}
.contents {
    width: 96%;
    margin: 0 auto;
}
#ec_1 {
    height: 400px;
}

#ec_2 {
    height: 270px;
}

#ec_3 {
    height: 400px;
}

#ec_4 {
    height: 1250px;
}

#ec_5 {
    height: 270px;
}

#ec_6 {
    height: 270px;
}

#ec_7 {
    height: 270px;
}

#ec_8 {
    height: 270px;
}
#ec_9 {
    height: 270px;
}
#ec_10 {
    height: 270px;
}
</style>